﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-upload, .el-upload-dragger {
        width: 150px;
    }
  </style>
}

<div style="height: 10px"></div>
<el-form v-on:submit.native.prevent ref="form" :model="form" size="small" status-icon label-width="220px">
  <el-form-item label="用户中心状态">
    <el-radio v-model="form.isHomeClosed" :label="false">启用用户中心</el-radio>
    <el-radio v-model="form.isHomeClosed" :label="true">禁用用户中心</el-radio>
    <div class="tips">选择禁用将关闭用户中心</div>
  </el-form-item>
  <template v-if="!form.isHomeClosed">

    <el-form-item label="用户中心名称" prop="homeTitle" :rules="{ required: true, message: '请输入用户中心名称' }">
      <el-input v-model="form.homeTitle"></el-input>
    </el-form-item>
    <el-form-item label="用户中心Logo类型">
      <el-radio v-model="form.isHomeLogo" :label="false">使用文字作为Logo</el-radio>
      <el-radio v-model="form.isHomeLogo" :label="true">使用图片作为Logo</el-radio>
    </el-form-item>
    <el-form-item v-if="form.isHomeLogo" label="用户中心Logo图片">
      <el-upload
        :action="uploadUrl"
        :file-list="uploadFileListHomeLogoUrl"
        :headers="{Authorization: 'Bearer ' + $token}"
        list-type="picture-card"
        :before-upload="uploadBeforeHomeLogoUrl"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :on-remove="uploadRemoveHomeLogoUrl"
        :multiple="false">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="默认用户头像图片">
      <el-upload
        :action="uploadUrl"
        :file-list="uploadFileListHomeDefaultAvatarUrl"
        :headers="{Authorization: 'Bearer ' + $token}"
        list-type="picture-card"
        :before-upload="uploadBeforeHomeDefaultAvatarUrl"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :on-remove="uploadRemoveHomeDefaultAvatarUrl"
        :multiple="false">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="用户注册表单字段">
      <el-checkbox label="用户名" checked disabled></el-checkbox>
      <el-checkbox label="密码" checked disabled></el-checkbox>
      <el-checkbox label="姓名" v-model="form.isUserRegistrationDisplayName"></el-checkbox>
      <el-checkbox label="手机号码" v-model="form.isUserRegistrationMobile"></el-checkbox>
      <el-checkbox label="电子邮箱" v-model="form.isUserRegistrationEmail"></el-checkbox>
      <el-checkbox label="用户组" v-model="form.isUserRegistrationGroup"></el-checkbox>
      
      <el-checkbox-group v-model="form.userRegistrationAttributes">
        <el-checkbox v-for="style in styles" :key="style.attributeName" :label="style.attributeName">{{style.displayName}}</el-checkbox>
      </el-checkbox-group>
      <div class="tips">
        字段名称及验证方式请进入
        <el-link type="primary" :underline="false" v-on:click="btnUsersStyleClick">用户字段</el-link>
        界面进行设置
      </div>
    </el-form-item>
    <el-form-item label="是否显示用户协议">
      <el-radio v-model="form.isHomeAgreement" :label="true">显示用户协议</el-radio>
      <el-radio v-model="form.isHomeAgreement" :label="false">不显示用户协议</el-radio>
      <div class="tips">设置显示用户协议后，新用户注册时必须勾选阅读并接受《用户协议》</div>
    </el-form-item>
    <el-form-item v-if="form.isHomeAgreement" label="用户协议" prop="homeAgreementHtml" :rules="{ required: true, message: '请输入用户中心名称' }">
      <el-input v-model="form.homeAgreementHtml" type="textarea"></el-input>
      <div class="tips">请在用户协议中填写显示在勾选框后面的文字，支持HTML格式</div>
    </el-form-item>
    <el-form-item label="用户中心欢迎语">
      <el-input v-model="form.homeWelcomeHtml" type="textarea"></el-input>
      <div class="tips">请填写进入用户中心后显示的欢迎文字，支持HTML格式。</div>
    </el-form-item>
    
  </template>
</el-form>

<el-divider></el-divider>
<div style="height: 10px"></div>

<el-row>
  <el-col :span="24" align="center">
    <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
  </el-col>
</el-row>

@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/homeConfig.js" type="text/javascript"></script> }